<script setup lang="ts">
	import { ref, reactive } from "vue"
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	import { array } from "js-sha1";
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let goodsId = ref(null)
	let cateId = ref()
	let price = ref(0)
	let priceVip = ref(0)
	let kucun = ref(0)
	onLoad((option) => {
		console.log(option);
		if (option.isHave == 1) {
			//编辑,需要判断alldata是否有数据，有数据就回显，没数据就请求新的规格
			let aa = JSON.parse(decodeURIComponent(option.skuData))
			console.log(aa, '+++++++++');
			if (aa.postSku.length > 0) {
				console.log('有规格值编辑');
				goodsId.value = option.id
				cateId.value = option.cateId
				guigeArr.value = aa.allObj.guigeD
				compositeObj.data = aa.allObj.comD
				price.value = option.price
				priceVip.value = option.priceVip
				kucun.value = option.kucun
				// computedComposite()
			} else {
				cateId.value = option.cateId
				goodsId.value = option.id
				price.value = option.price
				priceVip.value = option.priceVip
				kucun.value = option.kucun
				getGui()
			}

		} else {
			//新增，直接请求新的规格
			goodsId.value = option.id
			cateId.value = option.cateId
			price.value = option.price
			priceVip.value = option.priceVip
			kucun.value = option.kucun
			getGui()
		}
	})
	const getGui = () => {
		console.log('没规格值新增')
		proxy.$req('POST', proxy.$api.getLeimu, {
			goodsId: goodsId.value,
			categoryId: cateId.value,
		}).then((res) => {
			console.log(res);
			guigeArr.value = res.result.map((item) => {
				return {
					name: item.name,
					categoryId: item.categoryId,
					id: item.id,
					goodsId: item.goodsId,
					list: []
				}
			})
		})
	}
	//规格数组
	let guigeArr = ref([
		// {
		// 	id: '123',
		// 	name: '颜色',
		// 	list: [
		// 		// 	{
		// 		// 	logo: [],
		// 		// 	title: '默认颜色',
		// 		// 	id: ''
		// 		// },
		// 	]
		// },
	])
	//合体下面对象
	let compositeObj = reactive({
		data: {
			//是否展示的一个变量，可以刷新下面tabs
			show: true,
			//显示出来的数组
			nowList: [],
			//所有分类的总数组
			oldList: {}
		}
	})
	const addValue = (index) => {
		//加规格值
		//添加规格值到相应的规格对象数组
		guigeArr.value[index].list.push({
			logo: '',
			title: '',
			id: '',
			price: price.value,
			priceVip: priceVip.value,
			kucun: kucun.value
		})
	}
	const deleteValue = (index, key, it) => {
		//删除某个里面的规格值对象

		if (it.id) {
			proxy.$req('GET', proxy.$api.deleteSpecValue, {
				id: it.id,
			}).then((res) => {
				// uni.$u.toast(res.message)
				if (res.success) {
					guigeArr.value[index].list.splice(key, 1)
				} else {

				}
				computedComposite()
			})
		} else {
			guigeArr.value[index].list.splice(key, 1)
			computedComposite()
		}
	}
	const changeValueItem = (e, index, key, item) => {
		if (e == '') return
		proxy.$req('POST', proxy.$api.createSpecValue, {
			goodsId: goodsId.value,
			specName: item.name,
			value: e
		}).then((res) => {
			// uni.$u.toast(res.message)
			if (res.success) {
				guigeArr.value[index].list[key].id = res.result.id
			} else {

			}
			computedComposite()
		})
	}
	let popShow = ref(false)
	let popItem = ref()
	let popIndex = ref()
	let popForm = ref({
		price: '',
		kucun: '',
		priceVip: ''
	})
	const refreshComposite = () => {
		//刷新tabs
		compositeObj.data.show = true
	}
	const computedComposite = () => {
		compositeObj.data.oldList = JSON.parse(JSON.stringify(compositeObj.data.nowList))
		console.log(compositeObj.data.oldList, 'old');
		let a = guigeArr.value.map((item) => item.list)
		let b = a.filter(item => item.length > 0)
		b.map((item, index) => {
			b[index] = item.map((it) => {
				return it
			})
		})
		// console.log(b, 'b');
		//计算现在规格
		compositeObj.data.nowList = b.reduce((last, current, index) => {
			let array = [];
			last.forEach(par1 => {
				//循环qw
				// console.log(par1, 'par1');
				current.forEach(par2 => {
					//循环12
					// console.log(par2, 'par2');
					let obj = {};
					Object.assign(obj, {
						logo: par1.logo,
						title: `${par1.title}/${par2.title}`,
						id: `${par1.id}-${par2.id}`,
						price: price.value,
						priceVip: priceVip.value,
						kucun: kucun.value
					})
					array.push(obj);
				});
			});
			// console.log(array, 'array');
			return array;
		});
		console.log(compositeObj.data.nowList, ',now');
		conputedView()
	}
	const conputedView = () => {
		//之前规格对比现在规格，回显数据
		compositeObj.data.oldList.map((item, index) => {
			compositeObj.data.nowList.map((val, key) => {
				if (val.title == item.title) {
					compositeObj.data.nowList[key].price = compositeObj.data.oldList[index].price
					compositeObj.data.nowList[key].priceVip = compositeObj.data.oldList[index].priceVip
					compositeObj.data.nowList[key].kucun = compositeObj.data.oldList[index].kucun
				}
			})
		})
	}
	const afterRead = (e, index, key) => {
		//主规格上传图
		console.log(e);
		const item = [e.file];
		uni.showLoading({
			title: '上传中',
		})
		for (let a = 0; a <= item.length; a++) {
			uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: item[a].url,
				name: 'file',
				formData: {
					file: item[a].url,
				},
				success: (uploadFileRes) => {
					console.log(JSON.parse(uploadFileRes.data));
					if (!JSON.parse(uploadFileRes.data).success) {
						uni.showToast({
							title: JSON.parse(uploadFileRes.data).message,
							icon: 'none'
						})
						return
					}
					let result = JSON.parse(uploadFileRes.data).result
					uni.hideLoading()
					guigeArr.value[index].list[key].logo = result
					computedComposite()
				},
				complete() { }
			});
		}
	}
	const deletePic = (e, index, key) => {
		//主规格删除图
		guigeArr.value[index].list[key].logo = ''
		computedComposite()
	}
	const setItem = (item, index) => {
		popShow.value = true;
		popItem.value = item
		popIndex.value = index
		popForm.value.price = item.price
		popForm.value.kucun = item.kucun
		popForm.value.priceVip = item.priceVip
		console.log(item, index);
	}
	const closePop = () => {
		popShow.value = false
	}
	const confirmPop = () => {
		compositeObj.data.nowList[popIndex.value].price = popForm.value.price
		compositeObj.data.nowList[popIndex.value].kucun = popForm.value.kucun
		compositeObj.data.nowList[popIndex.value].priceVip = popForm.value.priceVip
	}
	const submitAll = () => {
		let isImg = false;
		guigeArr.value.map((item, index) => {
			item.list.map((it) => {
				if (it.logo == '' && index == 0) {
					isImg = true
				}
			})
		})
		if (isImg) {
			uni.$u.toast('请补充图片')
			return
		}
		//data3需要规格和规格值排列，颜色，白/黑，尺寸S/M,大小110/120
		let data3 = new Array();
		guigeArr.value.map((item, index) => {
			item.list.map((val, key) => {
				data3.push({
					goodsId: goodsId.value,
					name: item.name,
					value: val.title,
					id: val.id,
					categoryid: cateId.value
				})
			})
		})
		console.log(data3);
		//data需要所有id组合和价格，白/s/110,白/m/110,黑/s/110,黑/m/110
		let data = compositeObj.data.nowList.map((item, index) => {
			if (!item.price) {
				item.price = price.value
			}
			if (!item.priceVip) {
				item.priceVip = priceVip.value
			}
			if (!item.kucun) {
				item.kucun = kucun.value
			}
			// console.log(item.stock, kucun.value);
			return {
				goodsId: goodsId.value,
				logo: item.logo,
				price: item.price,
				specIds: item.id,
				linePrice: item.priceVip,
				stock: item.kucun,
				categoryid: cateId.value
			}
		})
		console.log(data);
		uni.$emit('watchSpec', {
			data,
			data3,
			allData: {
				comD: compositeObj.data,
				guigeD: guigeArr.value
			}
		})
		uni.navigateBack()
	}
</script>
<template>
	<view class="allContainer">
		<view class="colorScreen" v-for="(item,index) in guigeArr" :key="index">
			<view class="csTit">
				{{ item.name }}
			</view>
			<view class="csItem r-flex-around-center" v-for="(it,key) in item.list" :key="key">
				<view style="width: 120rpx;height: 120rpx;" v-if="index==0">
					<u-upload :fileList="it.logo?[{url:it.logo}]:[]" @afterRead="afterRead($event,index,key)"
						@delete="deletePic($event,index,key)" :maxCount="1" width="120rpx" height="120rpx">
					</u-upload>
				</view>
				<view class="">
					<u-input :placeholder="'请输入' + item.name" border="surround" v-model="it.title"
						@blur="changeValueItem($event,index,key,item)"></u-input>
				</view>
				<view class="" @click="deleteValue(index,key,it)">
					<u-icon name="close" size="25"></u-icon>
				</view>
			</view>
			<view class="addcs" @click="addValue(index)">
				+
			</view>
		</view>
		<view class="composite">
			<view class="cTit">
				设置库存价格
			</view>
			<view class="cItem r-flex-between-center" v-for="(item,index) in compositeObj.data.nowList" :key="index"
				@click="setItem(item,index)">
				<image style="background-color: #999;" :src="item.logo?item.logo:''" mode=""></image>
				<view class="ci1 u-line-1">
					{{ item.title }}
				</view>
				<view class="ci2 r-flex-center-center">
					<view class="c-flex-center-end">
						<text>￥{{ item.price }}</text>
						<text>￥VIP{{ item.priceVip }}</text>
						<text style="color: #999;">{{ item.kucun }}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="subBtn" @click="submitAll">
		确认
	</view>
	<u-popup :show="popShow" @close="closePop">
		<view class="popBox">
			<view class="pbTitle">
				库存价格
			</view>
			<view class="r-flex-center-center">
				<image class="pbImg" :src="popItem.logo?popItem.logo:''" mode=""></image>
			</view>
			<view class="pbGuige">
				{{ popItem.title }}
			</view>
			<view class="pbForm">
				<view class="r-flex-center-center pbfi">
					<text>价格</text>
					<u-input v-model="popForm.price" border="none" type="number" inputAlign="right"
						placeholder="请输入"></u-input>
				</view>
				<view class="r-flex-center-center pbfi">
					<text>会员价</text>
					<u-input v-model="popForm.priceVip" border="none" type="number" inputAlign="right"
						placeholder="请输入"></u-input>
				</view>
				<view class="r-flex-center-center pbfi">
					<text>库存</text>
					<u-input v-model="popForm.kucun" border="none" type="number" inputAlign="right"
						placeholder="请输入"></u-input>
				</view>
			</view>
			<view class="pbBtn r-flex-around-center" @click="closePop">
				<view class="pbb" style="background-color: #535353;">
					取消
				</view>
				<view class="pbb" style="background-color: #CB645E;" @click="confirmPop">
					确认
				</view>
			</view>
		</view>
	</u-popup>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.popBox {
		padding: 32rpx;

		.pbTitle {
			font-size: 34rpx;
			padding: 16rpx;
			text-align: center;
		}

		.pbImg {
			width: 400rpx;
			height: 400rpx;
			background-color: #999;
		}

		.pbGuige {
			padding: 16rpx;
			text-align: center;
		}

		.pbForm {
			.pbfi {
				border: 1rpx solid #CB645E;
				border-radius: 16rpx;
				margin: 16rpx 0;
				padding: 16rpx;

				text {
					margin-right: 16rpx;
				}
			}
		}

		.pbBtn {
			.pbb {
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 16rpx;
				color: #fff;
			}
		}
	}

	.subBtn {
		margin: 30rpx auto;
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 16rpx;
		color: #fff;
		background-color: #CB645E;
	}

	.allContainer {
		width: 686rpx;
		margin: 0 auto;
	}

	.colorScreen {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin: 32rpx 0;

		.csTit {
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		.csItem {
			margin: 16rpx 0;
		}

		.addcs {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #CB645E;
			color: #FFFFFF;
			text-align: center;
			font-size: 60rpx;
			font-weight: 700;
			margin: 0 auto;
			border-radius: 10rpx;
		}
	}

	.sizeScreen {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin: 32rpx 0;

		.ssTit {
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		.ssItem {
			margin: 20rpx 0;
		}

		.addss {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #CB645E;
			color: #FFFFFF;
			text-align: center;
			font-size: 60rpx;
			font-weight: 700;
			margin: 0 auto;
			border-radius: 10rpx;
		}
	}

	.composite {
		padding: 32rpx;
		margin: 32rpx 0;

		.cTit {
			font-weight: 700;
		}

		.cTabs {

			margin: 16rpx 0;
		}

		.cItem {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			margin: 20rpx 0;
			padding: 16rpx 32rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.ci1 {
				width: 290rpx;
				font-size: 34rpx;
			}

			.ci2 {
				font-size: 24rpx;
			}
		}
	}
</style>